<script setup lang="ts">
import { ElDialog, ElScrollbar } from 'element-plus'
import { ElIcon } from 'element-plus'
import { Close, FullScreen } from '@element-plus/icons-vue'
import VueTypes from 'vue-types'
import { computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue'
import { isNumber } from '@/utils/is'

const slots = useSlots()

const props = defineProps({
  modelValue: VueTypes.bool.def(false),
  title: VueTypes.string.def('默认标题'),
  fullscreen: VueTypes.bool.def(false),
  width: VueTypes.oneOfType([String, Number]).def('60vw'),
  maxHeight: VueTypes.oneOfType([String, Number]).def('60vh')
})

const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      // @ts-ignore
      delete obj[key]
    }
  }
  return obj
})

const isFullscreen = ref(props.fullscreen)

const toggleFull = () => {
  isFullscreen.value = !unref(isFullscreen)
}

const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)

watch(
  () => isFullscreen.value,
  async (val: boolean) => {
    await nextTick()
    if (val) {
      const windowHeight = document.documentElement.offsetHeight
      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
    } else {
      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
    }
  },
  {
    immediate: true
  }
)

const dialogStyle = computed(() => {
  return {
    height: unref(dialogHeight)
  }
})
</script>

<template>
  <ElDialog v-bind="getBindValue" :fullscreen="isFullscreen" lock-scroll draggable align-center
    :close-on-click-modal="false"
    :show-close="false"
  >
    <template #header="{ close }">
      <div class="flex justify-between items-center h-54px pl-15px pr-15px relative bg-#d2d2d2">
        <slot name="title">
          {{ title }}
        </slot>
        <div
          class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
        >
          <el-icon color="var(--el-color-info)" class="cursor-pointer is-hover !h-54px mr-10px" @click="toggleFull"><FullScreen /></el-icon>
          <el-icon class="cursor-pointer is-hover !h-54px" color="var(--el-color-info)" @click="close"><Close /></el-icon>
        </div>
      </div>
    </template>

    <ElScrollbar :style="dialogStyle">
      <slot></slot>
    </ElScrollbar>

    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </ElDialog>
</template>

<style lang="less" scoped>
  :deep(.el-overlay-dialog) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  :deep(.el-scrollbar__view) {
    height: 100%
  }

  .el-dialog {
    margin: 0 !important;
    &__header {
      margin-right: 0 !important;
      border-bottom: 1px solid var(--el-border-color);
      padding: 0;
      height: 54px;
    }
    &__body {
      padding: 15px !important;
    }
    &__footer {
      border-top: 1px solid var(--el-border-color);
    }
    &__headerbtn {
      top: 0;
    }
  }
</style>
